<!--<script setup>-->
<!--import $ from 'jquery';-->
<!--import "bootstrap/dist/css/bootstrap.min.css"-->
<!--import "bootstrap/dist/js/bootstrap.js"-->
<!--</script>-->

<!--<template>-->
<!--  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">-->
<!--      <ul class="navbar-nav">-->
<!--        <li class="nav-item active">-->
<!--          <a class="nav-link" href="/">King Of Bots</a>-->
<!--          <router-link to="navbar-brand" :to="{name:'pkindex'}"></router-link>-->
<!--        </li>-->
<!--        <li class="nav-item">-->
<!--          <a class="nav-link" href="/pk/ ">对战</a>-->
<!--          <router-link to="navbar-brand" :to="{name:'ranklist'}"></router-link>-->
<!--        </li>-->
<!--        <li class="nav-item">-->
<!--          <a class="nav-link" href="/record/">对局列表</a>-->
<!--          <router-link to="navbar-brand" :to="{name:'record'}"></router-link>-->
<!--        </li>-->
<!--        <li class="nav-item">-->
<!--          <a class="nav-link" href="/ranklist/">排行榜</a>-->
<!--          <router-link to="navbar-brand" :to="{name: 'userindex'}"></router-link>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <ul class="navbar-nav ml-auto">-->
<!--&lt;!&ndash;        <li class="nav-item dropdown">&ndash;&gt;-->
<!--&lt;!&ndash;          <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">&ndash;&gt;-->
<!--&lt;!&ndash;            Link&ndash;&gt;-->
<!--&lt;!&ndash;          </a>&ndash;&gt;-->
<!--&lt;!&ndash;          <ul class="dropdown-menu">&ndash;&gt;-->
<!--&lt;!&ndash;            <li><a class="dropdown-item" href="#">Action</a></li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><a class="dropdown-item" href="#">Another action</a></li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><hr class="dropdown-divider"></li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><a class="dropdown-item" href="#">Something else here</a></li>&ndash;&gt;-->
<!--&lt;!&ndash;          </ul>&ndash;&gt;-->
<!--&lt;!&ndash;        </li>&ndash;&gt;-->
<!--        <li class="nav-item dropdown">-->
<!--          <a class="nav-link dropdown-toggle" href="/user/bot" role="button" data-toggle="dropdown" aria-expanded="false">-->
<!--            Dropdown-->
<!--          </a>-->
<!--          <div class="dropdown-menu">-->
<!--            <a class="dropdown-item" href="#">Action</a>-->
<!--            <a class="dropdown-item" href="#">Another action</a>-->
<!--            <div class="dropdown-divider"></div>-->
<!--            <a class="dropdown-item" href="#">Something else here</a>-->
<!--          </div>-->
<!--        </li>-->
<!--      </ul>-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--  </nav>-->

<!--</template>-->

<!--<style>-->
<!--/* 可选：调整每个 nav-link 的间距（如果需要） */-->
<!--.nav-link {-->
<!--  margin: 0 10px; /* 左右间距 10px */-->
<!--}-->

<!--/* 如果左边项太多，想让它们更紧凑，可以加这个 */-->
<!--.navbar-nav:first-child {-->
<!--  margin-right: auto; /* 确保左边列表不被推移 */-->
<!--}-->
<!--</style>-->
<script>
import { onMounted } from 'vue';
import 'popper.js'
// import '@popperjs'

import {useRoute} from "vue-router";
import {computed} from "vue";
export default {
  setup(){
    const route=useRoute();
    let route_name=computed(()=>route.name)
    return {
      route_name
    }
  }
}

</script>

<template>
  <nav class="navbar navbar-expand-lg">
    <router-link class="navbar-brand" to="/">King Of Bots</router-link>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <!-- Left: Navigation items -->
      <ul class="navbar-nav">
        <li class="nav-item active">
          <router-link class="nav-link" to="/pk/">首页</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/pk/">对战</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/record/">对局列表</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/ranklist/">排行榜</router-link>
        </li>
      </ul>
      <!-- Right: Dropdown menu -->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <router-link class="dropdown-item" to="/user/bot">Action</router-link>
            <router-link class="dropdown-item" to="/user/bot">Another action</router-link>
            <div class="dropdown-divider"></div>
            <router-link class="dropdown-item" to="/user/bot">Something else here</router-link>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</template>

<style scoped>
/* Transparent navbar with blur effect */
.navbar {
  background-color: rgba(0, 0, 0, 0.4); /* More transparent (lower alpha) */
  backdrop-filter: blur(15px); /* Stronger blur for glass effect */
  padding: 1.5rem 3rem; /* Larger padding for spacious look */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
}

/* Navbar brand styling */
.navbar-brand {
  color: #ffffff !important;
  font-size: 1.9rem; /* Larger font */
  font-weight: 700; /* Bold */
  transition: color 0.3s ease, transform 0.2s ease;
}

.navbar-brand:hover {
  color: #00d4ff !important; /* Cyan on hover */
  transform: scale(1.05); /* Slight zoom */
}

/* Nav link styling */
.nav-link {
  color: #ffffff !important;
  margin: 0 30px; /* Larger margin for spacing */
  font-size: 1.2rem; /* Larger font */
  transition: color 0.3s ease, transform 0.2s ease;
}

.nav-link:hover {
  color: #00d4ff !important; /* Cyan on hover */
  transform: translateY(-3px); /* Lift effect */
}

/* Active link */
.nav-item.active .nav-link {
  color: #00d4ff !important;
  font-weight: 600;
}

/* Dropdown menu styling */
.dropdown-menu {
  background-color: rgba(255, 255, 255, 0.85); /* More transparent light background */
  border: none;
  border-radius: 12px; /* Rounder corners */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow */
  margin-top: 15px; /* More space below toggle */
}

.dropdown-item {
  color: #333333;
  padding: 12px 30px; /* More padding */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
  background-color: #e0f7ff; /* Light cyan on hover */
  color: #007bff; /* Bootstrap blue */
}

/* Dropdown divider */
.dropdown-divider {
  border-color: rgba(0, 0, 0, 0.15);
}

/* Toggler for mobile */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.7);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Align left menu */
.navbar-nav:first-child {
  margin-right: auto;
}
</style>